<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="left" th:fragment="mine_left">
    <link rel='stylesheet'
          href="../../static/backstage/lib/layui/css/layui.css" type='text/css' media='all' />
    <style>
        #top-slide .owl-item .slider-content .post-categories a,
        #top-slide .owl-item .slider-content .slider-titleh2:after,
        #top-slide .owl-item .slider-content .read-more a:hover,
        .posts-default-title h2:after,
        #ajax-load-posts a,
        #ajax-load-posts span,
        #ajax-load-posts button,
        .post-title .title:after,
        #commentform .form-submit input[type='submit'],
        .tag-clouds .tagname:hover,
        .cat ul li .title span,
        #top-slide-three .slider-content .slider-content-box .slider-content-item .post-categories a {
            background-color: #ca0c16;
        }

        a:hover,
        .authors_profile .author_name a {
            color: #ca0c16;
        }

        #ajax-load-posts a:hover,
        #ajax-load-posts button:hover {
            background-color: #273746
        }

        #header .search-box form button:hover,
        #header .primary-menu ul>li>a:hover,
        #header .primary-menu ul>li:hover>a,
        #header .primary-menu ul>li.current-menu-ancestor>a,
        #header .primary-menu ul>li.current-menu-item>a,
        #header .primary-menu ul>li .sub-menu li.current-menu-item>a,
        #header .primary-menu ul>li .sub-menu li a:hover,
        #menu-mobile a:hover {
            color: #ca0c16;
        }

        @media screen and (max-width: 767px) {
            #header .search-box form button {
                background-color: #ca0c16;
            }
        }

        .comment-form-smilies .smilies-box a:hover {
            border-color: #ca0c16
        }

        .left {
            float: left;
            width: 200px;
            /* height: 100vh; */
            background: #fff;
        }

        .user {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: inline-block;
            margin-left: 70px;
            margin-top: 100px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
        }

        .left .menu {
            text-align: center;
            margin-top: 150px;
        }

        .left .menu a {
            width: 70px;
            line-height: 30px;
            border-bottom: 1px solid #ccc;
            display: block;
            margin: 0 auto;
            font-size: 14px;


        }

        .left .menu a:last-child {
            border: 0;
        }

        .left .menu a.active {
            color: #888888;
        }

        .right {
            float: left;
            margin-left: 20px;
            margin-top: 30px;
            width: calc(100% - 220px);
        }
        h3 {
            margin: 10px 0;
        }
    </style>

    <img th:if="${session.user!=null}" th:src="'http://118.25.98.107:8000'+${session.user.headImg}"  alt="" class="user" id="head">
    <p id="username" style="text-align:center;" th:if="${session.user!=null}" th:text="${session.user.userName}">我的昵称</p>

    <div class="menu">
        <a th:if="${session.user!=null}" th:href="'/mine?userId='+${session.user.id}" class="active">
            浏览历史
        </a>
        <a href="/vip">
            VIP特权
        </a>
        <a href="/resetPwd" >
            修改密码
        </a>
        <a onclick="logout()">
            退出登录
        </a>
    </div>
    <script src="../../static/backstage/lib/layui/layui.js" charset="utf-8"></script>
    <script th:inline="javascript">

        function checkLogin(url){
            if([[${session.user==null}]]){
                layer.alert("请先登录！");
                return;
            }
            location.href=url;
        }


        $(function () {

            // checkLogin("/download/sys-user/toLogin");

            layui.use('upload', function(){
                var upload = layui.upload;

                //执行实例
                var uploadInst = upload.render({
                    elem: '#head' //绑定元素
                    ,url: '/pay/uploadImage' //上传接口
                    ,done: function(res){
                        console.log("shangchuan",res)
                        //上传完毕回调
                        // alert(res);
                        $("#head").attr("src",res.data.src);
                        updateUserImg(res.data.src,[[${session.user.id}]]);
                    }
                    ,error: function(err){
                        //请求异常回调
                        console.log(err)
                    }
                });
            });
        });

        $("#username").on("click",function () {
            layer.prompt({ title: '输入新的用户名', formType: 0 }, function (pass, index) {
                updateUserName(pass,[[${session.user.id}]])
                layer.close(index);
            });
        });

        function updateUserName(userName,userId){
            $.ajax({
                type: "POST",
                url: "/download/sys-user/updateUserName",
                data: {"userName": userName, "userId": userId},
                dataType: 'text',
                success: function (data) {
                    console.log(data)
                    $("#username").html(userName);
                },error:function (data) {
                    console.log(data)
                }
            });
        }
        function updateUserImg(userImg,userId){
            $.ajax({
                type: "POST",
                url: "/download/sys-user/updateUserImg",
                data: {"userImg": userImg, "userId": userId},
                dataType: 'text',
                success: function (data) {

                }
            });
        }
        
        function  logout() {
            $.ajax({
                type: "POST",
                url: "/download/sys-user/logout",
                // data: {"userImg": userImg, "userId": userId},
                // dataType: 'text',
                success: function (data) {
                    location.href="/";
                }
            });
        }
        
    </script>
</div>

</body>
</html>